/* Topnav */
	.main-header {
		max-height: 1000px !important;
		background: white;
		position: fixed !important;
		width: 100%;
		top: 0;
		left: 0;
		border-bottom: 1px solid $search-grey-border;
		> .topnav {
			background: white;
			height: 46px;
			//width: 85%;
			padding: 0;
		}
	}
	.universal-topnav-container {
		width: 100%;
		height: 46px;
		overflow: visible;
		display: table;
		.universal-topnav-item {
			display: table-cell;
			padding: 0;
			margin: 0;
			vertical-align: top;
		}
		> a  {
			position: absolute;
			top:0;
			float: left;
			margin-top: 5.5px;
			display: inline-block;
			vertical-align: top;
			img {
				height: 34px;		
			}
		}
	}

	.list-of-views {
		width: 50%;
		text-align: left;
		> ul {
			width: 100%;
			padding: 0;
			margin: 0;
			padding-left: 0 !important;	
		}
		
		li {
			padding: 0;
			margin: 0;
			display: inline-block;
			&:first-child a {
				padding-left: 0 !important;
			}
			&:last-child a {
				padding-right: 0 !important;
			}
			a {
				display: inline-block;
				padding: 10px 15px 9px 15px;
				@media (min-width: 768px) and (max-width: 991px) {
				   	padding: 10px 6px 9px 2px !important;
				}
				line-height: 20px;
				transition: all 0s ease-in-out;
				color: rgb(102, 117, 127);	
				&:hover, &.active-view-nav {
					color: #55acee;
					transition: all 0s ease-in-out;
					border-bottom: 4px solid #55acee;
					background: none;
					span.fa {
						color: #55acee;
					}
				}
				span.fa {
					margin-right: 5px;
					@media (min-width: 768px) and (max-width: 991px) {
					   	margin-right:1px;
					}
					font-size: 20px;
					position: relative;
					top: 3px;
					color: rgb(102, 117, 127);
				}
				span.nav-item-title {
					font-size: 13px;
					margin-left: 3px;
				}
			}
		}
		img.hidden-logo {
			margin-right: 15px;
		}
	}
	.topnav-user-actions {
		width: 50%;
		text-align: right;
		> * {
			display: inline-block;
			vertical-align: top;
			margin-left: 10px;
		}
		> img {
			float: left; 
			margin-left: 0;
			height: 34px;
			margin-top: 5.5px;
		}
	}
		.global-search-container {
			padding-top: 7px;
			position: relative;
			display: inline-block;
			#global-search-input { 
				color: #292f33;
				background-color: #f5f8fa;
				border: 1px solid #e1e8ed;
				border-radius: 21px;
				width: auto;
				padding: 8px 10px;
				font-size: 12px;
				width: 218px;
				&:focus {
					color: #292f33;
					text-shadow: none;
					background-color: #fff;
					box-shadow: none;
					opacity: 1;
					outline: none;
				}
			}
			ul.suggestions {
				position: absolute;
				left: -1px;
				top: 46px;;
				width: 100%;
				z-index: 101;
				margin: 0;
				padding: 0;
				li {
					background-color: rgba(85,172,238,0.9);
					color: white;
					display: block;
					padding: 8px;
					border: none;
					text-align: left;
					&:hover {
						background-color: white;
						color: rgba(85,172,238,1);
						cursor: pointer;
					}
					&:last-child {
						border-bottom-left-radius: 5px;
						border-bottom-right-radius: 5px;
					}
				}
				li.active {
					background-color: white;
					color: rgba(85,172,238,1);
					cursor: pointer;
				}
			}
			.fa.fa-search {
				position: absolute;
				top: 16px;
				right: 10px;
				font-size: 13px;
				color: #66757f;
			}

			@media (min-width: 768px) and (max-width: 991px) {
				#global-search-input {
					width: 160px;
				}
			}
		}

		@media (min-width: 0px) and (max-width: 767px) {
			.topnav-user-actions { width:  0%;}
			.topnav-user-actions .signin-twitter.isNotLoggedIn {
				display: none;
			}
			.topnav-user-actions .signin-twitter {
				position: absolute;
			    right: 139px;
			    top: 94px;
			    display: none;
			}
		}
		@media (min-width: 0px) and (max-width: 453px) {
			.topnav-user-actions .signin-twitter {
				position: absolute;
			    right: 150px;
			    top: 141px;
			}
		}
		.signin-twitter {
			overflow: visible;
			line-height: 20px;
			color: white;
			#home-view-user-avatar {
				margin-top: 7px;
				border-radius: 5px;
				height: 32px;
				width: 32px;
				&:hover {
					cursor: pointer;
				}
			}
			.initial-userinfo {
				span {
					display: inline-block;
					font-size: 14px;
					padding: 17px;
					color: white;
				}
				span.avatar-container {
					padding: 5px 0;
				}
				img {
					height: 40px;
					display: inline-block;
					border-radius: 20px;
					vertical-align: middle;
				}
			}
			.signin {
				span {
					display: inline-block;
					color: white;
					button {
						height: 32px;
						margin-top: 7px;
						padding: 6px 12px !important;
						color: white;
						border: none;
						font-size: 13px; 
						i {
							margin-right: 5px;
						}
					}
				}
			}
			.twitter-session {
				position: relative;
			}
			.hidden-user-info {
				position: absolute;
				right: 0;
				min-width: 164px;
				background-color: white;
				border: 1px solid #e1e8ed;
				border-radius: 5px;
				margin-top: 9px;
				li {
					margin: 0;
					padding: 0;
				}
				ul {
					margin: 0;
					padding: 5px 0px;
					border-bottom: 1px solid #e1e8ed;
					&:last-child {
						border: none;
					}
				}
				.full-name {
					font-size: 13px;
					font-weight: bold;
					color: #292f33;
				}
				.metadata {
					font-size: 11px;
					color: #8899a6;
				}
				a {
					text-align: left;
					font-size: 12px;
					color: #66757f;
					display: block;
					padding: 5px 20px;
					min-height: 32px;
					&:hover {
						background-color: #505050;
						color: white;
						span {
							color: white;
						}
					}

				}	
			}
			.hidden-user-info::after {
				content: " ";
				position: absolute;
				display: inline-block;
				margin-left: -1px;
				top: -8px;
				right: 12px;
				border-left: 9px solid transparent;
				border-right: 9px solid transparent;
				border-bottom: 9px solid #fff;
				border-bottom-color: rgba(255,255,255,0.98);
			}
			.hidden-user-info::before {
				content: " ";
				position: absolute;
				display: inline-block;
				border-bottom: 10px solid #8899a6;
				border-bottom-color: rgba(0,0,0,0.1);
				border-left: 10px solid transparent;
				border-right: 10px solid transparent;
				height: auto;
				right: 11px;
				top: -9px;
				width: auto;
			}
		}

		.global-tweet-button-container {
			padding: 0;
			#global-new-tweet-button {
				height: 32px;
				margin-top: 7px;
				color:white;
				span.fa {
					font-size: 14px;
				}
				span.text {
					font-size: 13px;
					margin-left: 3px;
				}
			}
		}
	

/* Mobile nav */
	.hidden-mobile-nav {
		text-align: center;
		min-height: 37px;
		#sign-in-button {
			position: absolute;
			top: 0;
			right: 11px;
			button {
				height: 32px;
				margin-top: 7px;
				padding: 6px 12px !important;
				background-color: #55acee;
				color: white;
				border: none;
				font-size: 13px;
			}
		} 
		
	}
		.mobile-nav-toggle-button-container {
			position: absolute;
			top: 35px;
			right: 30px;
		}
		.left-logo-and-brand {
			float: left;
		}
	.hidden-items {
		display: none;
		> div {
			text-align: right;
		}
		.list-of-views {		
			width: 100%;
			li a {
				padding: 15px 10px 10px 10px;
			}
		}
		.signin-status-container {
			margin-right: 11px;
		}
		.signin-twitter {
			display: inline-block;
			vertical-align: top;
			#home-view-user-avatar {
				margin-top: 11px;
			}
		}
		.global-tweet-button-container {
			margin: 0;
			text-align: right;
			padding: 10px 0;
			display: inline-block;
			vertical-align: top;
			#global-new-tweet-button {
				margin-top: 1px;
				margin-right: -13px;
			}
		}
	}
/* Toggle button */

 	// Custom for this page
 	.hided {
 		position: absolute;
 		top: 33px;
 		right: 41px;
 		#main-nav-button {
 			position: absolute;
 			left: 50%;
 			top: 50%;
 			transform: translate(-50%, -50%);
 		}
 	} 

 	// Generating the button
	$nav-toggle-button-color: #55acee;
	.hided {
		margin-right: 5px;
		text-align: right;
		margin-bottom: 7px;
		margin-top: -20px;
	}
	.hided.hided-sivukartta {
		margin-top: -5px;
	}
	#pull {
		padding: 10px 4px 17px 4px;
		//background: white;
	}
	$button-size : 24px; 
	$transition: 0s;
	.lines-button {

	  background-color: transparent;
	  border: none;
	  &:focus {
	  	outline: 0;
	  }
	  display: inline-block;
	  padding: 0 $button-size/4;
	  transition: 0s;
	  cursor: pointer;
	  user-select: none;
	  border-radius: $button-size/7;
	 
	  // &:hover {
	  //   opacity: 1;
	  // }

	  // &:active {
	  //     transition: 0;
	  //     color: white;
	  //     background: white;
	  //   }
	 
	}

	@mixin line {
	  display: inline-block;
	  width: $button-size;
	  height: $button-size/7;
	  background: $nav-toggle-button-color;
	  border-radius: $button-size/14; 
	  transition: $transition;
	  -webkit-transition: $transition;
	  -ms-transition: $transition;
	}

	.lines {
	   
	  //create middle line
	  @include line;
	  position: relative; 
	 
	  /*create the upper and lower lines as pseudo-elements of the middle line*/
	  &:before, &:after {
	   
	   @include line;
	    position: absolute;
	      left:0;
	    content: '';
	    transform-origin: $button-size/14 center;
	    -ms-transform-origin: $button-size/14 center;
	    -webkit-transform-origin: $button-size/14 center;
	  }
	  &:before { top: $button-size/4; }
	  &:after { top: -$button-size/4; }
	}

		.lines-button:hover {
			  // opacity: 1;
	     
			  // .lines {
			  //   &:before { top: $button-size/3.5; }
			  //   &:after { top: -$button-size/3.5; }
			  // }
		}

	/* Transform into X */

	.lines-button.x.close .lines{
	 
	    /*hide the middle line*/
	    background: transparent;
	 
	    /*overlay the lines by setting both their top values to 0*/
	    &:before, &:after{
	      transform-origin: 50% 50%;
	      -ms-transform-origin: 50% 50%;
	      -webkit-transform-origin: 50% 50%;
	      top:0;
	      width: $button-size;
	    }
	 
	    // rotate the lines to form the x shape
	    &:before{
	      transform: rotate3d(0,0,1,45deg); 
	      -webkit-transform: rotate3d(0,0,1,45deg); 
	      -ms-transform: rotate3d(0,0,1,45deg); 
	    }
	    &:after{
	      transform: rotate3d(0,0,1,-45deg); 
	      -webkit-transform: rotate3d(0,0,1,-45deg); 
	      -ms-transform: rotate3d(0,0,1,-45deg); 
	    }
	}

	div#signupModal > div.modal-dialog > div.modal-content {
		border-top-left-radius: 6px;
		border-top-right-radius: 6px;
		border-bottom-right-radius: 6px;
		border-bottom-left-radius: 6px;
	}

	div#myModal > div.modal-dialog > div.modal-content {
		border-top-left-radius: 6px;
		border-top-right-radius: 6px;
		border-bottom-right-radius: 6px;
		border-bottom-left-radius: 6px;
		width: 110%;
	}

	div#myModal > div.modal-dialog > div.modal-content > form > div.modal-footer {
		border-top-left-radius: 6px;
		border-top-right-radius: 6px;
		border-bottom-right-radius: 6px;
		border-bottom-left-radius: 6px;
	}

	img#loklak-signup-icon {
		display:block;
		margin-left:auto;
		margin-right:auto;
	}

	#close{
	    display:inline-block;
	    margin-left:-2%;
	    text-align: center;
	    width:30px;
	    height:29px;
	    position: absolute;
	}

	input.fa.fa-twitter.btn.btn-default {
		background-color: #55ACEE;
		border-color: #55ACEE;
		color: white;
	}

@media screen and (min-width: 0px) and (max-width: 767px) {
	.main-header {
		> .topnav {
			height: auto;
			overflow: visible;
		}
	}
}

@media screen and (min-width: 0px) and (max-width: 377px) {
	.hidden-mobile-nav {
		text-align: left;
	}
	.global-search-container {
		padding-top: 8px;
		margin-left: 50px;
		#global-search-input { 
			color: #292f33;
			background-color: #f5f8fa;
			border: 1px solid #e1e8ed;
			border-radius: 13px;
			width: auto;
			padding: 8px;
			width: 100px;
			&:focus {
				color: #292f33;
				text-shadow: none;
				background-color: #fff;
				box-shadow: none;
				opacity: 1;
				outline: none;
			}
		}
	}
}
